{include file="public/header-static"/}
{include file="public/sidebar"/}

<div id="main">
    {include file="public/header"/}
    <main class="main-content">
        <div class="container">
            <div class="page-header">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                    </ol>
                </nav>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div style="display: flex;justify-content: space-between;padding: 19px 25px;">
                            <i style="font-size: 22px; color: #457BFFFF;font-weight: 600;">添加收益</i>
                        </div>
                        <div class="card-body">
                            <form action="{:url('/finance/incomeAdd')}" method="post" target="iframe_form"
                                  enctype="multipart/form-data">

                                <div class="form-group row blueLabel blueLabel2">
                                    <label class="col-sm-2 col-form-label">经办人ID</label>
                                    <div class="col-sm-6">
                                        <input type="text" name="uid" class="form-control" placeholder="经办人ID">
                                    </div>
                                </div>

                                <div class="form-group row blueLabel blueLabel2">
                                    <label class="col-sm-2 col-form-label">收益金额</label>
                                    <div class="col-sm-6">
                                        <input type="text" name="price" class="form-control" placeholder="收益金额">
                                    </div>
                                </div>

                                <div class="form-group row blueLabel">
                                    <label class="col-sm-2 col-form-label">备注</label>
                                    <div class="col-sm-6">
                                        <textarea class="custom_text form-control" placeholder="备注"
                                                  name="desc"></textarea>
                                    </div>
                                </div>

                                <div class="form-group row blueLabel">
                                    <label for="" class="col-sm-2 col-form-label">入账时间</label>
                                    <div class="col-sm-6" style="display: flex;align-items: center;">
                                        <input name="pay_time" type="text" autocomplete="off" id="pay_time"
                                               class="layui-input"
                                               placeholder="入账时间">
                                    </div>
                                </div>

                                <div class="form-group row blueLabel">
                                    <label for="" class="col-sm-2 col-form-label">收款方式</label>
                                    <div class="col-sm-6">
                                        <select name="mid" id="mid" class="form-control">
                                            <option value="">请选择收款方式</option>
                                            <option value="1">对公账户</option>
                                            <option value="2">对私账户</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row blueLabel">
                                    <label class="col-sm-2 col-form-label">截图</label>
                                    <div class="col-sm-6">
                                        <input type="hidden" class="form-control images" name="images" required="" aria-required="true">
                                        <button type="button" class="btn btn-secondary" id="images">上传截图</button>

                                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                                            预览图：
                                            <div class="layui-upload-list uploader-list" style="overflow: auto;" id="uploader-images">
                                            </div>
                                        </blockquote>
                                    </div>
                                </div>

                                <button type="submit" class="btn btn-secondary">提交</button>
                            </form>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </main>

    {include file="public/footer"/}
    <script>
        layui.use(['laydate'], function () {
            var laydate = layui.laydate;
            //时间选择器
            laydate.render({
                elem: '#create_time'
                , type: 'datetime'
                , min: getNowFormatDate()
            });
        });

        // 各种上传
        layui.use('upload', function() {
            var $ = layui.jquery
                , upload = layui.upload;

            // 截图上传
            upload.render({
                elem: '#images'
                , accept: 'images'
                , acceptMime: 'image/*'
                ,url: '{:url("/upload/uploadImages")}?path=incomeImages'
                ,before: function(obj){
                    layer.msg('截图上传中...', {
                        icon: 16,
                        shade: 0.05,
                        time: 0
                    });
                }
                ,done: function(res){
                    layer.close(layer.msg());//关闭上传提示窗口
                    // console.log(res)
                    //上传完毕
                    var images = $('.images').val();
                    if (images != '') {
                        // 删除旧图片
                        delImageOrVideo(images);
                        $('#uploader-images').children('.file-iteme').remove();
                    }
                    $('.images').val(res.data.src);
                    $('#uploader-images').append(
                        '<div id="" class="file-iteme">' +
                        '<div class="handle" src="'+ res.data.src +'"><span class="fa fa-times" style="border-radius: 0.375rem 0.375rem 0 0;"></span></div>' +
                        '<img style="width: 5rem;height: 5rem;border-radius: 0.375rem;" src='+ res.data.src +'>' +
                        // '<div class="info">' + res.data.name + '</div>' +
                        '</div>'
                    );
                }
            });
        });

        // 删除图片
        $(document).on("click", ".file-iteme .handle", function(event){
            console.log($(this).attr('src'))
            var parents = $(this).parents();
            var images = parents.eq(3).children('.images');
            console.log(images)
            if (images.val() != '') {
                images.val('');
            }
            delImageOrVideo($(this).attr('src'));
            $(this).parent().remove();
        });
    </script>


</div>

<style>
    .blueLabel {
        font-weight: 600;
        color: #000000FF;
        position: relative;
    }

    .blueLabel:before {
        content: '';
        position: absolute;
        top: 0;
        left: 1%;
        display: block;
        width: 26px;
        height: 26px;
        border-radius: 4px;
        background-color: #ECEFFFFF;
    }

    .orangeLabel {
        font-weight: 600;
        color: #000000FF;
        position: relative;
    }

    .orangeLabel:before {
        content: '';
        position: absolute;
        top: 0;
        left: 1%;
        display: block;
        width: 26px;
        height: 26px;
        border-radius: 4px;
        background-color: #FEE0D3FF;
    }

    .bottom {
        display: grid;
        place-items: center;
        margin-bottom: 20px;
    }

    .positionBox1, .positionBox2 {
        position: relative;
    }

    .positionBox2 .pullDown2 {
        position: absolute;
        left: 70%;
        bottom: -90%;
        transform: rotate(180deg);
        cursor: pointer;
    }

    .positionBox1 .pullDown1 {
        position: absolute;
        right: -70%;
        bottom: -10%;
        transform: rotate(180deg);
        cursor: pointer;
    }

    .pullDown1:before, .pullDown1:after, .pullDown2:before, .pullDown2:after {
        position: absolute;
        content: '';
        border-top: 7px transparent dashed;
        border-left: 7px transparent dashed;
        border-right: 7px transparent dashed;
        border-bottom: 7px #fff solid;
    }

    .pullDown1:before, .pullDown2:before {
        border-bottom: 7px #5C5F66FF solid;
    }

    .pullDown1:after, .pullDown2:after {
        top: 2px;
        border-bottom: 7px #fff solid;
    }
</style>